<template>
  <div>
    <router-view></router-view>
    <ul>
      <li v-for="item in navBar" @click="doActive(item.index)" :class="bacColor">
        {{item.title}}
      </li>
    </ul>
  </div>

</template>

<script>
  export default{
    data: function(){
      return {
        bacColor: 'movie',
        num:'',
        isActive:true,
        navBar:[
          {title:'电影',index:0},
          {title:'音乐',index:1},
          {title:'图书',index:2},
          {title:'相册',index:3},
        ]
      }
    },
    methods: {
      doActive(index){
        if(index == 0){
          this.$router.history.push('/home');
          this.bacColor = 'movie';
        }else if(index == 1){
          this.$router.history.push('/music');
          this.bacColor = 'music';
        }else if(index == 2){
          this.$router.history.push('/book');
          this.bacColor = 'book';
        }else if(index == 3){
          this.$router.history.push('/album');
          this.bacColor = 'album';
        }
      }
    }
  }


</script>

<style scoped>
  ul{
    width: 100%;
    position: fixed;
    bottom:0;
    left:0;
    display: flex;
  }
  ul>li{
    flex: 1;
    float: left;
    margin-top:0 !important;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background-color: #2196F3;
    color:#EEE;
  }
  .movie{
    background-color: #2196F3;
  }
  .music{
    background-color: #009688;
  }
  .book{
    background-color: #795548;
  }
  .album{
    background-color: #3F51B5;
  }
</style>
